<template>
    <div>
        <image style="width: 750px;height:1207px;margin-top: 88px" src="../../resource/img/ktbg.jpg"></image>
        <div class="list">
            <list  loadmoreoffset="10">
                <cell class="cell">
                    <div class="panel" @click="jump('/map')">
                        <text class=" textTitle">探索地图</text>
                        <text class=" textSubTitle">（选择适合的成长路径）</text>
                    </div>
                </cell>

                <cell class="cell">
                    <div class="panel" @click="jump('/learning')" >
                        <text class=" textTitle">学习微课</text>
                        <text class=" textSubTitle">（选择适合的成长路径）</text>
                    </div>
                </cell>

                <cell class="cell">
                    <div class="panel" @click="jump('/achievement')">
                        <text class=" textTitle">成果展示</text>
                        <text class=" textSubTitle">（选择适合的成长路径）</text>
                    </div>
                </cell>
                <cell class="cell">
                    <div class="panel" @click="jump('/explore-learning')">
                        <text class=" textTitle">学习互动</text>
                        <text class=" textSubTitle">（选择适合的成长路径）</text>
                    </div>
                </cell>
            </list>
        </div>
        <AppHeader :title="headerTitle"></AppHeader>
    </div>
</template>

<script>
    import AppHeader from '../../components/AppHeader.vue'
    import mixins from '../../mixins'
    module.exports = {
        mixins:[mixins],
        components: { AppHeader },
        data() {
            return {
                navList:[],
                headerTitle:"生涯课堂",
                lists: [1, 2, 3, 4, 5]
            }
        },
        created(){
            let self=this;
            self.getPageData();
        },
        methods: {

            getPageData(){
                let self=this;
                self.request({
                    url:"/data/index.json"
                }).then(res=>{
                    console.log(res);
                if(res.status==1){
                }
            });
            },
            clickTabItem:function(item){

            },
            clickAppNavItem:function(item){
                this.jump(item.link);
            },
            loadMoreList (event) {

            }
        }
    }
</script>

<style scoped>
    .list{
        top:24px;
        height: 1310px;
        position: fixed;
        width: 750px;
        left:0;
        overflow-y:hidden
    }
    .cell{

    }
    .panel {
        width: 314px;
        height: 112px;
        margin-top: 160px;
        margin-left:213px;
        flex-direction: column;
        justify-content: center;
    }
    .textTitle {
        text-align: center;
        flex: 1;
        font-size: 30px;
        margin-top: 12px;
        color: #ffffff;
    }

    .textSubTitle {
        font-size: 22px;
        color: #ffffff;
        text-align: center;
        flex: 1;
    }



</style>